<template>
  <main>
    <div class="home">
      <slider @onTabChange="onTabChange" />
      <banner :src="bannerSrc" />
      <home-recommend v-show="!showVideo" />
      <video-list v-show="showVideo" />
    </div>
  </main>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import Banner from '../components/Banner.vue'
import Slider from '../components/Slider.vue'
import HomeRecommend from '../components/HomeRecommend.vue'
import VideoList from '../components/VideoList.vue'

interface ToDo {
  userId: number
  id: number
  title: string
  completed: boolean
}

@Component({
  components: {
    Slider,
    Banner,
    HomeRecommend,
    VideoList
  },
  head () {
    return {
      title: '首页'
    }
  }
} as any)
export default class Home extends Vue {
//   transition (to, from) {
//     if (!from) {
//       return 'slide-left'
//     }
//     return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
//   }

    readonly BANNER_LIST = [
      'https://img.tukuppt.com//ad_preview/00/11/13/5c9940242bf11.jpg!/fw/780',
      'https://img.tukuppt.com//ad_preview/00/03/56/5c98abb074bdd.jpg!/fw/780',
      'https://img.tukuppt.com//ad_preview/00/10/15/5c992911709f7.jpg!/fw/780',
      'https://img.tukuppt.com//ad_preview/00/19/70/5c9a0504de105.jpg!/fw/780',
      'http://pic.616pic.com/bg_w1180/00/14/61/bjDQ7hTsKA.jpg!/fw/1120',
      'https://img.tukuppt.com//ad_preview/00/10/15/5c992911709f7.jpg!/fw/780',
      'https://img.tukuppt.com//ad_preview/00/19/70/5c9a0504de105.jpg!/fw/780',
      'http://pic.616pic.com/bg_w1180/00/14/61/bjDQ7hTsKA.jpg!/fw/1120'
    ];

    bannerSrc: string = this.BANNER_LIST[0];
    showVideo = false;

    onTabChange (index: number) {
      if (index === 1) {
        this.showVideo = true
      } else {
        this.showVideo = false
      }
      this.bannerSrc = this.BANNER_LIST[index]
    }
}
</script>
